<template>
  <div class="sidebar sidebarBox " >
    <div class="biaoti">
					<img class="title-img" src="@/assets/xitong.png"/>
				<span class="title">管理后台</span>
    </div>
    <el-scrollbar style="height:100%;position:fixed;left:0;top:80px;background:#001529;width:  180px;">
      <el-menu
        mode="horizontal"
        class="el-menu-demo"
        :collapse="collapse"
        :default-active="active"
        background-color="#001529"
        active-text-color="#409eff"
        text-color="#a6adb4"
        >
        <div class="wrapper" ref="wrapper" >
          <Menu :layoutData="layoutData" />
        </div>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import bus from "../common/bus";
import Menu from "./Menu";
import Bscroll from "better-scroll";

export default {
  name: "LeftMenu",
  data() {
    return {
      collapse: false,
      active: '/iot/pile/list',
      collWidth: '',
    };
  },
  components: {
    Menu
  },
  computed: {
    layoutData() {
      return this.$store.getters.layoutData;
    }
  },
  methods: {
    initScroll() {
      this.scroll = new Bscroll(this.$refs.wrapper, {});
    }
    
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroll();
    });
  },
  created() {
    this.collWidth = this.$store.getters.ismOrpc ? 'width:180px': 'width:300px'
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });
  }
};
</script>

<style>

.sidebarBox {
  z-index: 1000;
  position: fixed;
  /* height: 100%;
  position: fixed;
  left: 0px;
  top: 0;
  z-index: 10; */
}
.sidebar {
  /* height: 100%; */
  /* width: 300px; */
}
.el-scrollbar__view {
  height: 100%;
}

.biaoti {
  height: 80px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background: #0d161e;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn {
  font-size: 28px;
		vertical-align: middle;
		cursor: pointer;
}

</style>

